<template>
  <div class="win">
    <!-- 购物车 -->
    <div class="bod" v-if="goodsList.length!=0">
      <div class="container">
        <div class="list_row" v-for="(item,index) in goodsList" :key="index">
          <div class="chebox">
            <i-checkbox :checked="item.checked" color="#0BD093" @change="listChange(index)"></i-checkbox>
          </div>
          <div class="row" @click="hr_goodsDetail(item.pro_id)">
            <div class="left_row_box">
              <img :src="item.image" />
            </div>
            <div class="right_row_box">
              <div class="name ellipsis2">{{item.name}}</div>

              <div class="tips_box">
                <p :class="ite=='包邮'?'blue':'green'" v-for="(ite, k) in item.label" :key="k">{{ite}}</p>
              </div>
              <div class="price">
                <p class="price1">
                  <span>¥</span>
                  {{item.price}}
                </p>
              </div>
              <div class="commit" @click.stop>
                <img src="/static/img/reduce_logo.png" @click="listReduce(index)" />
                <p>{{item.num}}</p>
                <img src="/static/img/add_logo.png" @click="listAdd(index)" />
              </div>
            </div>
            <div @click.stop>
              <img
                @click="toggleList(index,item.pro_id)"
                class="delete_logo"
                src="/static/img/delete_logo.png"
              />
            </div>
          </div>
          <!-- <div
            class="delete"
            @click="toggleList(index,item.goods_id)"
            :class="item.delete!=undefined?'act':''"
          >
            <p>删除</p>
          </div>-->
        </div>
      </div>
      <!-- 悬浮底部 -->
      <div class="fot_space"></div>
      <div class="fot">
        <div class="chebox">
          <i-checkbox
            class="chebox_r"
            :value="index"
            color="#0BD093"
            :checked="totalChecked"
            @change="totalChange"
          ></i-checkbox>
          <p>全选</p>
        </div>
        <div class="right_price_box">
          <div class="total">
            <p class="text">合计:</p>
            <p class="price">
              <span>¥</span>
              {{totalPrice}}
            </p>
          </div>
          <button class="btn" @click="settlement">立即结算</button>
        </div>
      </div>
    </div>
    <!-- 没有数据时展示 -->
    <div class="nodata" v-if="goodsList.length==0">
      <div class="nodata_row">
        <img mode="widthFix" v-if="bjurl" :src="bjurl+'shop_car_nodata.png'" class="nodata_img" alt />
        <p>购物车空空如也~</p>
        <button class="no_btn" @click="hr_goodsClass">看看更多好商品</button>
      </div>
    </div>
    <i-toast id="toast" />
    <i-modal :visible="popupShow" @ok="popupConfirm" @cancel="popupCancel">
      <view>确定删除该条消息吗</view>
    </i-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      agent: {},
      goodsList: [], //商品列表
      orderList: [], //结算列表
      activeListRow: null, //删除时,存储删除的id,index
      popupShow: false,
      totalChecked: false,
      totalPrice: "0.00",
      shopIdJson: [],
      order_id: 0,
      order_number: 0
    };
  },
  methods: {
    // 请求接口购物车列表
    getShopCarLists() {
      this.$ajax("/home/Shopcar/shopCarlists", "post", {})
        .then(res => {
          if (res.status) {
            this.goodsList = res.data;
            this.totalGoodsActive();
          } else {
            this.goodsList = "";
          }
        })
        .catch(err => {});
    },
    // 请求接口订单添加
    getNewOrder() {
      let activeGoods = 0;
      this.goodsList.forEach(el => {
        if (el.checked == true) {
          activeGoods++;
        }
      });
      if (activeGoods == 0)
        return this.$toast({
          content: "未选择购买商品"
        });
      this.getOrderList();
      this.$ajax("/home/order/getcheckOrder", "post", {
        shopcar_id: JSON.stringify(this.shopIdJson),
        pro_type: "pro",
        order: this.orderList
      })
        .then(res => {
          if (res.status) {
            this.order_id = res.data.order_id;
            this.order_number = res.data.order_number;
            wx.navigateTo({
              url:
                "../orderConfirm/main?order_id=" +
                this.order_id +
                "&order_number=" +
                this.order_number
            });
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    //请求接口商品数量加减
    getShopWriteNum(index) {
      this.$ajax("/home/Shopcar/shopWriteNum", "post", {
        pro_id: this.goodsList[index].pro_id,
        num: this.goodsList[index].num
      })
        .then(res => {
          if (res.status) {
          } else {
          }
        })
        .catch(err => {});
    },
    // 结算商品数组
    getOrderList() {
      let k = 0;
      this.orderList = [];
      this.shopIdJson = [];
      for (let i in this.goodsList) {
        if (this.goodsList[i].checked == true) {
          this.orderList[k] = this.goodsList[i];
          this.shopIdJson[k] = this.goodsList[i].shop_id;
          k++;
        }
      }
    },
    // 全部选中
    totalGoodsActive() {
      this.goodsList.forEach(el => {
        el.checked = true;
      });
      this.totalChecked = true;
      this.computedTotalPrice();
      this.$forceUpdate();
    },
    // 跳转到商品分类
    hr_goodsDetail(pro_id) {
      wx.navigateTo({
        url: "../goodsDetail/main?pro_id=" + pro_id + "&type=" + 1
      });
    },
    // 跳转到商品分类
    hr_goodsClass() {
      wx.navigateTo({
        url: "../goodsClass/main?navActive=" + 0
      });
    },
    // 计算属性失效,使用方法代替计算总价
    computedTotalPrice() {
      let priceTotal = 0;
      this.goodsList.forEach(el => {
        if (el.checked) {
          priceTotal += parseFloat(el.price) * el.num;
        }
      });
      this.totalPrice = priceTotal.toFixed(2);
    },
    // 去结算发送模板消息
    settlement() {
      let phone = wx.getStorageSync("phone");
      if (phone == "" || phone == null || phone == undefined) {
        return this.$toast({
          content: "请登录再购买~"
        });
      }
      wx.requestSubscribeMessage({
        tmplIds: ["mrkEMkHADmpaQpF-nOKwSBtV5E0LmD4mf33RXzQ3mKQ"],
        success: re => {
          this.getNewOrder();
        },
        fail: err => {
          this.getNewOrder();
        }
      });
    },
    hr_orderConfirm(orderNum) {
      wx.navigateTo({
        url: "../orderConfirm/main?orderNum=" + orderNum
      });
    },
    toggleList(index, id) {
      this.activeListRow = {
        index,
        id
      };
      this.popupShow = true;
    },
    //取消删除
    popupCancel() {
      this.popupShow = false;
      this.goodsList[this.activeListRow.index].delete = undefined;
    },
    // 确认删除
    popupConfirm(e) {
      this.$ajax("/home/Shopcar/deleteShopCar", "post", {
        pro_id: this.activeListRow.id
      })
        .then(res => {
          if (res.status) {
            this.popupShow = false;
            this.goodsList.splice(this.activeListRow.index, 1);
            this.computedTotalPrice();
            this.$toast({
              content: "删除成功"
            });
          } else {
          }
        })
        .catch(err => {});
    },
    // 数量加
    listAdd(index) {
      this.goodsList[index].num++;
      this.computedTotalPrice();
      this.getShopWriteNum(index);
    },
    // 数量减
    listReduce(index) {
      if (this.goodsList[index].num > 1) {
        this.goodsList[index].num--;
        this.computedTotalPrice();
        this.getShopWriteNum(index);
      } else {
        this.$toast({
          content: "该物品不能减少了呦~"
        });
      }
    },
    listChange(index) {
      this.goodsList[index].checked = !this.goodsList[index].checked;
      if (this.totalChecked) {
        let isto = this.goodsList.some(el => {
          return !el.checked;
        });
        if (isto) this.totalChecked = false;
      } else {
        let isto = this.goodsList.every(el => {
          return el.checked;
        });
        if (isto) this.totalChecked = true;
      }
      this.computedTotalPrice();
      this.$forceUpdate();
    },
    totalChange() {
      this.totalChecked = !this.totalChecked;
      this.goodsList.forEach(el => {
        el.checked = this.totalChecked;
      });
      this.computedTotalPrice();
      this.$forceUpdate();
    }
  },
  onShow() {
    this.getShopCarLists();
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.$navColor({
      title: "购物车"
    });
    this.agent = wx.getStorageSync("agent");
    this.getShopCarLists();
    this.computedTotalPrice();
    this.totalChange();
    // this.goodsList = [];
  }
};
</script>
<style lang="scss" scoped>
.win {
  .bod {
    .container {
      .list_row {
        margin: 20rpx auto 0;
        width: 750rpx;
        box-sizing: border-box;
        padding: 15rpx 22rpx 15rpx 14rpx;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        box-shadow: -1rpx 7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);

        .chebox {
          transform: scale(0.75);
          margin-right: 4rpx;
        }
        .row {
          flex: 1;
          display: flex;
          justify-content: space-between;
          $w: 198rpx;
          .delete_logo {
            position: absolute;
            top: 22rpx;
            right: 30rpx;
            width: 39rpx;
            height: 37rpx;
          }
          .left_row_box {
            width: $w;
            height: $w;
            border-radius: 10rpx;
            margin-right: 10rpx;
            overflow: hidden;
            img {
              width: $w;
              height: $w;
            }
          }
          .right_row_box {
            box-sizing: border-box;
            flex: 1;
            padding: 10rpx 12rpx 6rpx 12rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            .name {
              color: #4d4d4d;
              font-size: 29rpx;
              line-height: 1.2;
              overflow: hidden;
              width: 348rpx;
            }
            .price {
              display: flex;
              align-items: flex-end;
              .price1 {
                margin-bottom: -2rpx;
                color: $pink;
                font-size: 36rpx;
                line-height: 1;
                span {
                  font-size: 24rpx;
                }
              }
            }
            .tips_box {
              display: flex;
              p {
                padding: 6rpx 10rpx 7rpx;
                font-size: 22rpx;
                border-radius: 15rpx;
                margin-right: 10rpx;
              }
              .blue {
                color: #6da9ff;
                background-color: #deebff;
                border-radius: 15rpx;
                margin-right: 10rpx;
              }
              .green {
                color: #ffffff;
                background-color: $green;
              }
            }
            .commit {
              position: absolute;
              right: 20rpx;
              bottom: 0rpx;
              $h: 38rpx;
              display: flex;
              align-items: center;
              img {
                width: 46rpx;
                height: 46rpx;
              }
              p {
                font-size: 35rpx;
                line-height: $h;
                height: $h;
                padding: 0 20rpx;
                color: #333333;
                font-weight: bold;
              }
            }
          }
        }
        .delete {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          background-color: $green;
          border-radius: 20rpx;
          color: #fff;
          font-weight: 400;
          font-size: 34rpx;
          letter-spacing: 2rpx;
          justify-content: center;
          align-items: center;
          width: 0rpx;
          transition: 0.3s;
          overflow: hidden;
          display: flex;
          white-space: nowrap;
          &.act {
            width: 150rpx;
          }
          p {
            text-align: center;
          }
        }
      }
    }
    $fot_h: 120rpx;
    .fot_space {
      width: 100%;
      height: 140rpx;
    }
    .fot {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #ffffff;
      position: fixed;
      box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(46, 49, 51, 1);
      left: 0;
      right: 0;
      bottom: 0;
      height: $fot_h;
      padding: 13rpx 30rpx 13rpx 30rpx;
      align-items: center;
      .chebox {
        display: flex;
        align-items: center;
        .chebox_r {
          transform: scale(0.75);
          margin-right: 4rpx;
        }
        p {
          position: relative;
          color: #808080;
        }
      }
      .right_price_box {
        display: flex;
        height: 100%;
        align-items: center;
        .total {
          margin-right: 30rpx;
          display: flex;
          align-items: flex-end;
          .text {
            color: $red;
            font-size: 28rpx;
          }
          .price {
            padding-left: 10rpx;
            color: $red;
            font-size: 32rpx;
            span {
              font-size: 30rpx;
            }
          }
        }
        .btn {
          width: 220rpx;
          height: 74rpx;
          text-align: center;
          color: #fff;
          display: flex;
          box-sizing: border-box;
          align-items: center;
          justify-content: center;
          border-radius: 37rpx;
          background: linear-gradient(
            0deg,
            rgba(11, 208, 173, 1),
            rgba(11, 208, 94, 1)
          );
          font-size: 30rpx;
          letter-spacing: 3rpx;
        }
      }
    }
  }
  .nodata {
    .nodata_row {
      width: 90%;
      margin: 0 auto;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      img {
        margin: -200rpx auto 40rpx;
        width: 497rpx;
      }
      p {
        color: $g6;
        font-size: 28rpx;
        line-height: 2;
        text-align: center;
      }
      .no_btn {
        width: 46%;
        text-align: center;
        color: #fff;
        display: flex;
        $h: 70rpx;
        height: $h;
        border-radius: $h/2;
        line-height: $h;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        margin: 70rpx auto;
        background: linear-gradient(
          0deg,
          rgba(11, 208, 173, 1),
          rgba(11, 208, 94, 1)
        );
        font-size: 28rpx;
      }
    }
  }
}
</style>
